<template>
  <div class="form-container">
    <Navigation :steps="steps" @step-change="handleStepChange"/>
    <component 
      :is="currentStepComponent" 
      @complete="handleStepComplete"
      :formData="formData"
    />
  </div>
</template>

<script>
import Navigation from './Navigation.vue'

export default {
  components: { Navigation },
  data: () => ({
    currentStep: 1,
    formData: {
      category: '',
      package: null,
      credentials: {}
    },
    steps: [
      { id: 1, component: 'CategorySelector', title: '选择分类' },
      { id: 2, component: 'AuthForm', title: '开发者认证' },
      { id: 3, component: 'PackageUpload', title: '上传软件包' }
    ]
  }),
  computed: {
    currentStepComponent() {
      return this.steps.find(s => s.id === this.currentStep)?.component
    }
  },
  methods: {
    handleStepChange(step) {
      if (step > this.currentStep && !this.validateStep(step)) return
      this.currentStep = step
    },
    validateStep(step) {
      // 实现分步验证逻辑
    }
  }
}
</script>

<style>
.form-container {
  max-width: 800px;
  margin: 2rem auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 2rem;
  background: white;
}
</style>